<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Karamu | Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/dashboard.css">

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="favicon.ico">

    <script src="js/lib/modernizr-2.6.2.min.js"></script>
    <!--[if lt IE 9]> <script src="js/lib/html5shiv.js"></script> <![endif]-->
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                </a>
                <a class="brand" href="#"><img src="images/logo.png" style="height:20px" /> Karamu</a>
                <div class="nav-collapse collapse navbar-inverse-collapse">
                    <ul class="nav pull-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"></i> Username <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#settings"><i class="icon-cog"></i> Settings</a></li>
                                <li><a href="#login" data-toggle="modal"><i class="icon-circle-arrow-left"></i> Logout</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-envelope icon-white"></i> Messages <span class="badge badge-info">5</span> <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><strong>NextPayDayAdvance:</strong> Get up to 1500 USD , let us help</a></li>
                                <li><a href="#"><strong>Credit Summary:</strong> View Your 3 Credit Scores Fast</a></li>
                                <li><a href="#"><strong>NeuropathyTreatmentGroup:</strong> 1 Werid Trick To Ease Neuropathy Pain...</a></li>
                                <li><a href="#"><strong>Norman Chan:</strong> $47.1M USD For You</a></li>
                                <li><a href="#"><strong>Casino:</strong> Scratch below to get your $100 FREE!</a></li>
                            </ul>
                        </li>
                        <li><a href="desktop.html"><i class="icon-home icon-white"></i> Desktop</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]-->

    <div id="dashboard">
        <div id="dashboard-gadget-store" class="collapse">
            <div class="container-fluid">
                <div id="dashboard-gadget-store-carousel" class="carousel slide" data-interval="false">
                    <div class="row-fluid">
                        <form class="span6 form-inline form-search" role="form">
                            <div class="span4 control-group">
                                <select class="span12" name="gadget-categories"></select>
                            </div>
                            <div class="span8 input-append">
                                <input class="search-query" type="text" name="gadget-search" data-provide="typeahead" autocomplete="off" placeholder="All Gadgets">
                                <button type="submit" class="btn">Search</button>
                            </div>
                        </form>
                        <div class="span6 pagination">
                            <ul class="pull-right"></ul>
                        </div>
                    </div>
                    <div class="carousel-inner"></div>
                    <div class="btn-primary close-drawer"><i class="icon-eject icon-white"></i></div>
                </div>
            </div>
        </div>
        <div id="dashboard-tabs" class="container-fluid">
            <div class="tabbable">
                <div class="btn-toolbar pull-right">
                    <div class="btn-group">
                        <button class="btn" data-toggle="collapse" data-target="#dashboard-gadget-store"><i class="icon-shopping-cart"></i> Gadget Store</button>
                    </div>
                    <div class="btn-group">
                        <button class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-th-large"></i> Layout <span class="caret"></span></button>
                        <ul class="dropdown-menu pull-right">
                            <li class="dropdown-header">2 Columns</li>
                            <li><a href="#layout" data-layout="25|75"><span class="glyphicon"><img src="img/layout-25-75.png" width="39" height="14" /></span> 25|75</a></li>
                            <li><a href="#layout" data-layout="33|66"><span class="glyphicon"><img src="img/layout-33-66.png" width="39" height="14" /></span> 33|66</a></li>
                            <li><a href="#layout" data-layout="50|50"><span class="glyphicon"><img src="img/layout-50-50.png" width="39" height="14" /></span> 50|50</a></li>
                            <li><a href="#layout" data-layout="66|33"><span class="glyphicon"><img src="img/layout-66-33.png" width="39" height="14" /></span> 66|33</a></li>
                            <li><a href="#layout" data-layout="75|25"><span class="glyphicon"><img src="img/layout-75-25.png" width="39" height="14" /></span> 75|25</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">3 Columns</li>
                            <li><a href="#layout" data-layout="33|33|33"><span class="glyphicon"><img src="img/layout-33-33-33.png" width="39" height="14" /></span> 33|33|33</a></li>
                            <li><a href="#layout" data-layout="50|25|25"><span class="glyphicon"><img src="img/layout-50-25-25.png" width="39" height="14" /></span> 50|25|25</a></li>
                            <li><a href="#layout" data-layout="25|50|25"><span class="glyphicon"><img src="img/layout-25-50-25.png" width="39" height="14" /></span> 25|50|25</a></li>
                            <li><a href="#layout" data-layout="25|25|50"><span class="glyphicon"><img src="img/layout-25-25-50.png" width="39" height="14" /></span> 25|25|50</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">4 Columns</li>
                            <li><a href="#layout" data-layout="25|25|25|25"><span class="glyphicon"><img src="img/layout-25-25-25-25.png" width="39" height="14" /></span> 25|25|25|25</a></li>
                        </ul>
                    </div>
                </div>
                <ul class="nav nav-tabs">
                    <li><a href="#newTab"><i class="icon-plus"></i></a></li>
                </ul>
                <div class="tab-content"></div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="form-login">
                    <div class="modal-header">
                        <h4 id="loginLabel" class="modal-title">Please Log In</h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="username" class="input-block-level" placeholder="Username" value="john.doe">
                        <input type="password" name="password" class="input-block-level" placeholder="Password" value="password">
                        <label class="checkbox">
                            <input type="checkbox" name="remember-me" value="remember-me" checked="true"> Remember me
                        </label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary btn-large" type="submit">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<scr' + 'ipt src="js/lib/jquery-1.10.2.min.js"><\/scr' + 'ipt>')</script>
    <script src="js/lib/plugins.js"></script>
    <script src="js/lib/jquery.cookie.js"></script>
    <script src="js/lib/underscore-min.js"></script>
    <script src="/gadgets/js/shindig-container:core:rpc:pubsub-2.js?c=1&debug=1&nocache=1&container=default"></script>
    <script>
        shindig.IfrGadget.getMainContent = function(continuation) {
            var iframeId = this.getIframeId();
            gadgets.rpc.setRelayUrl(iframeId, this.serverBase_ + this.rpcRelay);
            gadgets.rpc.setAuthToken(iframeId, this.rpcToken);
            continuation(
                '<div class="' + this.cssClassGadgetContent + '"><iframe id="' + iframeId + '" name="' + iframeId +
                '" class="' + this.cssClassGadget + '" src="about:blank' + '" frameborder="no" scrolling="' +
                (this.scrolling ? 'auto' : 'no') + '"' + (this.height ? ' height="' + this.height + '"' : '') +
                (this.width ? ' width="' + this.width + '"' : '') + '></iframe></div>'
            );
        };
    </script>

    <script src="js/lib/bootstrap.min.js"></script>

    <!-- Views: Catalog -->
    <script id="template-select-option" type="text/html">
        <option value="<%= value %>"><%= label %></option>
    </script>
    <script id="template-pager-arrow" type="text/html">
        <li data-target="<%= target %>" data-slide="<%= slide %>"><a href="#"><%= label %></a></li>
    </script>
    <script id="template-pager-number" type="text/html">
        <li data-target="<%= target %>" data-slide-to="<%= slideTo %>"><a href="#"><%= label %></a></li>
    </script>
    <script id="template-pager-page" type="text/html">
        <div class="item"><div class="row-fluid"></div></div>
    </script>
    <script id="template-gadget-preview" type="text/html">
        <div class="<%= width %> media gadget-preview">
            <img class="thumbnail pull-left" src="<%= gadget.thumbnail %>" width="96" height="96" />
            <div class="media-body">
                <h4 class="media-heading"><%= gadget.title %></h4>
                <p class="muted">
                    <small>Category: <strong><%= gadget.category %></strong><br />
                           By <strong><a href="mailto:<%= gadget.author_email %>"><%= gadget.author %></a></strong> at <strong><%= gadget.organization %></strong></small>
                </p>
                <p><%= gadget.description %></p>
                <p><a href="<%= gadget.url %>" class="btn btn-primary btn-xs"><i class="icon-plus"></i> Add to Dashboard</a></p>
            </div>
        </div>
    </script>

    <!-- Views: Tabs & Panes -->
    <script id="template-dashboard-tab" type="text/html">
        <li class="tab" id="tab-<%= id %>">
            <a href="#tab-pane-<%= id %>" data-toggle="tab">
                <span class="tab-name"><%= title %></span>
                <span class="tab-edit"><i class="icon-edit" alt="Rename Tab" title="Rename Tab"></i></span>
                <span class="tab-remove"><i class="icon-remove" alt="Delete Tab" title="Delete Tab"></i></span>
                <span class="tab-name-input"><input type="text" value="<%= title %>" /></span>
                <span class="tab-check"><button class="btn" type="button"><i class="icon-check"></i> Save</button><span> or </span><span class="cancel">Cancel</span></span>
            </a>
        </li>
    </script>
    <script id="template-dashboard-tab-pane" type="text/html">
        <div class="tab-pane" id="tab-pane-<%= id %>">
            <div class="row-fluid"></div>
        </div>
    </script>
    <script id="template-dashboard-tab-pane-column" type="text/html">
        <div class="tab-pane-column <%= width %>" data-column="<%= column %>"></div>
    </script>
    <script id="template-dashboard-gadget" type="text/html">
        <div id="<%= id %>" class="gadget">
            <div class="navbar">
                <div class="navbar-inner">
                    <span class="title"><%= title %></span>
                    <span class="icon"><button class="close">&times;</button></span>
                </div>
            </div>
            <div id="<%= id %>-body" class="gadget-body"></div>
        </div>
    </script>

    <!-- Controllers -->
    <script src="js/controllers/karamu.js"></script>
    <script src="js/controllers/catalog.js"></script>
    <script src="js/controllers/preview.js"></script>

    <script src="js/controllers/dashboard/groups.js"></script>
    <script src="js/controllers/dashboard/group.js"></script>
    <script src="js/controllers/dashboard/gadget.js"></script>

    <!-- Models -->
    <script src="js/models/dashboard/models.js"></script>

    <!-- App Controller -->
    <script src="js/controllers/dashboard.js"></script>

  </body>
</html>